<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
    .col-xs-1-5,
    .col-sm-1-5,
    .col-md-1-5,
    .col-lg-1-5 {
        position: relative;
        min-height: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .col-xs-1-5 {
        width: 20%;
        float: left;
    }

    @media (min-width: 768px) {
        .col-sm-1-5 {
            width: 20%;
            float: left;
        }
    }

    @media (min-width: 992px) {
        .col-md-1-5 {
            width: 20%;
            float: left;
        }
    }

    @media (min-width: 1200px) {
        .col-lg-1-5 {
            width: 20%;
            float: left;
        }
    }

    .one {
        height: 230px;
        overflow: hidden;
    }

    .change {
        height: 230px;
        overflow: hidden;
    }

    .layui-laydate,
    .layui-laydate-hint {
        border: 1px solid #fff !important;
        box-shadow: 0 0 0 #fff !important;
        background-color: #fff;
        color: #666;
    }

    #lay-date .layui-laydate {
        width: 100%;
        height: 230px;
    }

    #lay-date .layui-laydate-main {
        width: 100%;
        margin: 0 auto;
    }

    #lay-date .laydate-prev-m {
        left: 40px;
    }

    #lay-date .laydate-next-m {
        right: 40px;
    }

    #lay-date .layui-laydate-main .layui-laydate-header .laydate-set-ym {
        font-size: 13px;
        width: 100%;
        text-align: center;
        overflow: visible;
        white-space: nowrap;
    }

    #lay-date .layui-laydate-main .laydate-set-ym span,
    .layui-laydate-header i {
        padding: 0px 0px;
        cursor: pointer;
    }

    #lay-date .layui-laydate-content {
        padding: 0;
        margin: 0 auto 5px;
    }

    #lay-date .layui-laydate-content table {
        margin: auto;
    }

    .laydate-month-list>li {
        width: 25%;
        margin: 5px 0 !important;
    }

    .layui-laydate-footer {
        display: none;
    }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-xs-1-5">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>变更日历统计</h5>
                    </div>
                    <div class="ibox-content one pd0" style="margin: 0 auto">
                        <div id="lay-date"></div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1-5">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变更来源统计</h5>
                    </div>
                    <div class="ibox-content one">
                        <div class="row">
                            <div class="echarts change" id="echarts-pie-source"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1-5">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变更风险等级统计</h5>
                    </div>
                    <div class="ibox-content one">
                        <div class="row">
                            <div class="echarts change" id="echarts-pie-risk"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1-5">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>变更实施统计</h5>
                    </div>
                    <div class="ibox-content one">
                        <div class="row">
                            <div class="echarts change" id="echarts-pie-active"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1-5">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>实施变更成功率统计</h5>
                    </div>
                    <div class="ibox-content one">
                        <div class="row">
                            <div class="echarts change" id="echarts-pie-succeed"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>月度变更工单数量趋势分析</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-line"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>月度变更分类统计</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="echarts" id="echarts-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 变更日历统计模态框 -->
    <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" style="color:#1ab394;font-size: 16px;">变更日历</h4>
                </div>
                <div class="modal-body" style="height: 300px;overflow-y:auto;">
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>变更时间</th>
                                <th>变更详情</th>
                                <th>处理人</th>
                            </tr>
                        </thead>
                        <tbody id="performanceShow"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <script src="../../js/plugins/layer/laydate/laydate.js"></script>
    <script src="../../js/handlebars-v3.0.1.js"></script>
    <script id="tpl" type="text/x-handlebars-template">
        {{! 性能TOP10展现模板 }} {{#each performanceShow}}
        <tr>
            <td>{{num}}</td>
            <td>{{time}}</td>
            <td>{{des}}</td>
            <td>{{person}}</td>
        </tr>
        {{/each}}
    </script>
    <script type="text/javascript">
    $(function() {

        // ---------- Handlebars模板引擎 ---------- 
        var tpl = $("#tpl").html(); //用jquery获取模板
        var template = Handlebars.compile(tpl); //预编译模板

        // ---------- 变更日历统计 ----------

        // 添加icon和日期号， 作为mark的属性值
        // for (var i = 0; i < results.length; i++) { //results为存储日期的数组['2017-08-09','2017-09-11','2017-09-24','2018-01-12']
        //     var sdate = results[i]; //记录时间
        //     var date_array = sdate.split("-");
        //     var date_day = date_array[2]; //取日期的天比如2017-09-11取11
        //     mark[sdate] = '<span style="color:#666;font-size: 14px;"><i class="iconfont icon-rizhi" style="color:rgba(238, 143, 92, 0.8); position:absolute; left: 5px;font-size: 28px;z-index:-1;"></i>' + date_day + '</span>';
        // }

        laydate.render({
            elem: '#lay-date', //指定元素
            position: 'static',
            format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
            mark: {
                '2019-6-15': '标记4', //具体日期
                '2019-6-10': '' //如果为空字符，则默认显示数字+徽章
            },
            done: function(value, date, endDate) { // 控件选择完毕后的回调
                $('#modifyModal').modal("show");
                console.log(date)

                if (date.year === 2019 && date.month === 6 && date.date === 1) { //点击2017年8月15日，弹出提示语
                    alert('儿童节快乐');
                }
            },
            // choose: function(datas) { //选择日期完毕的回调
            //     alert('得到：' + datas);
            // }
        });

        var perforContext = {
            "performanceShow": [{
                    "num": "1",
                    "time": "2018-12-21",
                    "des": "VPN账号申请",
                    "person": "张数"
                },
                {
                    "num": "2",
                    "time": "2018-12-27",
                    "des": "人行征信：删除数据",
                    "person": "五名"
                },
                {
                    "num": "3",
                    "time": "2019-1-21",
                    "des": "VPN账号申请",
                    "person": "王东"
                },
                {
                    "num": "4",
                    "time": "2018-12-21",
                    "des": "人行征信：删除数据",
                    "person": "小米"
                }
            ]
        };
        var performanceShow = template(perforContext); //匹配json内容
        $("#performanceShow").html(performanceShow); //输入模板


        // ---------- 变更来源统计 ----------
        var pieChartSource = echarts.init(document.getElementById("echarts-pie-source"));
        var source1 = 3;
        var source2 = 2;
        var source3 = 3;
        var source4 = 9;
        var source5 = 127;
        var pieoptionSource = {
            title: {
                subtext: '系统故障：' + source1 + '\n' + '\n' +
                    '系统优化：' + source2 + '\n' + '\n' +
                    '例行维护：' + source3 + '\n' + '\n' +
                    '项目支持：' + source4 + '\n' + '\n' +
                    '服务请求：' + source5,
                itemGap: 5,
                subtextStyle: { color: '#000000' }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
                fontSize: 20
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                bottom: '15%',
                padding: 0,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
            },
            series: [{
                type: 'pie',
                radius: ["30%", "40%"],
                center: ['70%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    { value: source1, name: '系统故障' },
                    { value: source2, name: '系统优化' },
                    { value: source3, name: '例行维护' },
                    { value: source4, name: '项目支持' },
                    { value: source5, name: '服务请求' }
                ]
            }]
        };
        pieChartSource.setOption(pieoptionSource);
        $(window).resize(pieChartSource.resize);

        // ---------- 变更风险等级统计 ----------
        var pieChartRisk = echarts.init(document.getElementById("echarts-pie-risk"));
        var risk1 = 0;
        var risk2 = 1;
        var risk3 = 143;
        var pieoptionRisk = {
            title: {
                subtext: '高：' + risk1 + '\n' + '\n' +
                    '中：' + risk2 + '\n' + '\n' +
                    '低：' + risk3,
                itemGap: 5,
                subtextStyle: { color: '#000000' }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
                fontSize: 20
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                bottom: '22%',
                padding: 0,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
            },
            series: [{
                type: 'pie',
                radius: ["30%", "40%"],
                center: ['70%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    { value: risk1, name: '高' },
                    { value: risk2, name: '中' },
                    { value: risk3, name: '低' }
                ]
            }]
        };
        pieChartRisk.setOption(pieoptionRisk);
        $(window).resize(pieChartRisk.resize);

        // ---------- 变更实施统计 ----------
        var pieChartActive = echarts.init(document.getElementById("echarts-pie-active"));
        var active1 = 142;
        var active2 = 2;
        var pieoptionActive = {
            title: {
                subtext: '已实施：' + active1 + '\n' + '\n' +
                    '未实施：' + active2,
                itemGap: 5,
                subtextStyle: { color: '#000000' }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
                fontSize: 20
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                bottom: '22%',
                padding: 0,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
            },
            series: [{
                type: 'pie',
                radius: ["30%", "40%"],
                center: ['70%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    { value: active1, name: '已实施' },
                    { value: active2, name: '未实施' }
                ]
            }]
        };
        pieChartActive.setOption(pieoptionActive);
        $(window).resize(pieChartActive.resize);

        //  ---------- 实施变更成功率统计 ----------
        var pieChartSucceed = echarts.init(document.getElementById("echarts-pie-succeed"));
        var succeed1 = 144;
        var succeed2 = 142;
        var succeed3 = 2;
        var pieoptionSucceed = {
            title: {
                subtext: '变更总数：' + succeed1 + '\n' + '\n' +
                    '成功数量：' + succeed2 + '\n' + '\n' +
                    '失败数量：' + succeed3,
                itemGap: 5,
                subtextStyle: { color: '#000000' }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)",
                fontSize: 20
            },
            legend: {
                orient: 'horizontal',
                x: 'center',
                bottom: '22%',
                padding: 0,
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 10,
            },
            series: [{
                type: 'pie',
                radius: ["30%", "40%"],
                center: ['70%', '30%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [
                    { value: succeed1, name: '变更总数' },
                    { value: succeed2, name: '成功数量' },
                    { value: succeed3, name: '失败数量' }
                ]
            }]
        };
        pieChartSucceed.setOption(pieoptionSucceed);
        $(window).resize(pieChartSucceed.resize);

        // ---------- 月度变更工单数量趋势分析 ----------
        var lineChart = echarts.init(document.getElementById("echarts-line"));
        var lineData = [0, 22, 3, 20, 40, 60, 80, 70, 10, 20, 30, 100];
        var lineoption = {
            grid: {
                top: '10%',
                bottom: '10%',
                left: '10%',
                right: '10%'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                boundaryGap: false,
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: lineData,
                type: 'line'
            }]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);

        // ---------- 月度变更分类统计 ----------
        var barChart = echarts.init(document.getElementById("echarts-bar"));
        var barData = [20, 37, 24, 14, 40];
        var baroption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                height: '90%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['业务数据导出与维护', '账户、密码与权限变更', '资源发放与回收', '系统优化与策略调整', '故障处理'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    lineStyle: {
                        color: '#999', // X轴及其文字颜色
                    }
                },
                axisLabel: {
                    fontSize: 14,
                    color: '#000000',
                    formatter: function(params) { // 分隔x轴文字
                        var newParamsName = "";
                        var paramsNameNumber = params.length;
                        var provideNumber = 5; //一行显示几个字
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                        if (paramsNameNumber > provideNumber) {
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";
                                var start = p * provideNumber;
                                var end = start + provideNumber;
                                if (p == rowNumber - 1) {
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;
                            }
                        } else {
                            newParamsName = params;
                        }
                        return newParamsName
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#999', // X轴及其文字颜色
                    }
                }
            }],
            series: [{
                name: '数量',
                type: 'bar',
                barWidth: '40%',
                data: barData,
                label: { // 图形上的文本标签
                    show: true,
                    position: 'insideTop', // 相对位置
                    color: '#fff'
                },
                itemStyle: {
                    //通常情况下：
                    normal: {
                        color: function(params) {
                            var colorList = ['#65d186', '#f67287', '#f29e3c', '#c05bdd', '#7a65f2']; //每根柱子的颜色
                            return colorList[params.dataIndex];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }]
        };
        barChart.setOption(baroption);
        $(window).resize(barChart.resize);

    })
    </script>
</body>

</html>